  <template>
	<view>
		<!-- 头部 -->
		 <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed="true" color="#fff" title="客户管理" left-icon="left" right-text="新增" @clickLeft="backFn"     @clickRight="addFn"></uni-nav-bar>
		<!-- 搜索条件 -->
		<view style="position: fixed;z-index: 100;width:100%;">
			<uni-row class="demo-uni-row">
				<uni-col :span="14">
					<zb-dropdown-menu  style="width: 100%" z-index="12">
					  <zb-dropdown-item    v-model="formData.chargePersonName"  :options="option"  @change="changeFn"></zb-dropdown-item>
					</zb-dropdown-menu>
				</uni-col>
				<uni-col :span="2">
					<view class="title"  style="color:#c3c3c3">|</view>
				</uni-col>
				<uni-col :span="8">
					<view class="title" @click="isShow=true">筛选</view>
				</uni-col>
			</uni-row>
		</view>
		<view style="width:100%;height: 88rpx;display: block;margin-bottom: 15px;"></view>
		<!-- 客户列表 --> 
		  <u-swipe-action :autoClose="true">
			<view  class="customerbox" v-for="(item,index) in list" :key="index">
				<u-modal :show="show==index" :title="title" :content='content' showConfirmButton showCancelButton @confirm="btnOk(item,index)" @cancel="show=null"></u-modal>
				 <u-swipe-action-item :options="options" @click='delItem(index)'>
					 <view  @click="getInfo(item.id)">
						 <view style="height: 100%;">
							 <view class="customerbox_one">{{item.name}}</view>
							 <view  style="color:#8c8b8a;margin: 3px 0;">负责人：{{item.chargePersonName}}</view>
							 <view style="color: #8c8b8a;">跟进时间：{{item.allocationTime}}</view>
							 <view class="status_box">
								 <span class="status_box_one" v-if="item.customerStatus==0">未知客户</span>
								 <span class="status_box_one" v-if="item.customerStatus==1">潜在客户</span>
								 <span class="status_box_one" v-if="item.customerStatus==2">意向客户</span>
							</view>
					 </view>
				 </view>
			 </u-swipe-action-item>
		</view>	
		</u-swipe-action>
		<!-- 右边筛选 -->
		<u-popup :show="isShow" mode="right"  customStyle="margin-top:44px" overlayStyle="margin-top:44px" :closeOnClickOverlay="true" @close="isShow=false">
		    <view class="rightBox">
				<u-cell-group>
						<u-cell title="客户名称"></u-cell>
						<view class="input">
							 <u--input placeholder="请输入客户名称" border="surround" v-model="formData.name"></u--input>
						</view>
						<u-cell title="负责人名称"></u-cell>
						<view class="input">
							 <u--input placeholder="请输入负责人名称" border="surround" v-model="formData.chargePersonName"></u--input>
						</view>
						<u-cell isLink @click="sourceShow=true"  title="客户来源"></u-cell>
				        <view class="input">
				        	 <u--input  placeholder="客户来源" border="surround" v-model="formData.sourceName"></u--input>
				        </view>
						<u-cell isLink @click="labelShow=true"  title="客户标签"></u-cell>
						<view class="input">
							 <u--input placeholder="客户标签" border="surround" v-model="formData.labelName"></u--input>
						</view>
						<u-cell isLink @click="labelShow=true"  title="流失原因"></u-cell>
						<view class="input">
							 <u--input placeholder="流失原因" border="surround" v-model="formData.labelName"></u--input>
						</view>
						
				</u-cell-group>
				<view class="button" >
					<view class="anniu" @click="reset">重置</view>
					<view class="anniu" @click="searchClick" style="background-color: #ff7c35;">搜索</view>
					
				</view>
			</view>
			
		</u-popup>
		<u-picker :closeOnClickOverlay="true" @close='sourceShow=false' :show="sourceShow" :columns="sourceOption" keyName="dictLabel" @confirm="sourrceConfirm"></u-picker>
		<u-picker :closeOnClickOverlay="true" @close='labelShow=false' :show="labelShow" :columns="labelOptions" keyName="dictLabel" @confirm="labelConfirm"></u-picker>
		<u-picker :closeOnClickOverlay="true" @close='lossReasonsShow=false' :show="lossReasonsShow" :columns="lossReasonsOptions" keyName="dictLabel" @confirm="lossReasonsConfirm"></u-picker>
		<view v-if="list.length ==0 " class="BGC"></view>
		<u-toast ref="uToast"></u-toast>
	</view>
  </template>

<script>
	import {listCustomer,addCustomer,updateCustomer,delCustomer} from '@/api/customer.js'
	import {getDicts} from '@/api/dictionary/index.js'
	export default {
		data() {
			return {
				formData:{
					pageSize:10,
					pageNum:1,
					name:'',
					chargePersonName:'',//负责人
					source:'',//客户来源
					sourceName:'',
					label:'',
					labelName:'',
					lossReasons:'',
					lossReasonsName:'',
				},
				list:[],//客户数据列表
				options:[{
					text:'删除'
				}],
				show:null,//模态框是否弹出
				isShow:false,//筛选框
				title:'提示',
				content:'是否确认删除此条数据',
				total:0,
				option:[
					{
					    text: '全部客户',
					    value: ''
					},
					{
					    text: '我负责的',
					    value: ''
					},
				],
				labelShow:false,
				sourceShow:false,
				lossReasonsShow:false,
				sourceOption:[],//客户来源
				labelOptions:[],//客户标签
				lossReasonsOptions:[],//流失原因
			};
		},
		
		onLoad() {
			// console.log(this.$store.getters);
			// console.log(this.option);
			this.option[1].value=this.$store.getters.name
			
			this.initData()
			this.getLabel()
			this.getSource()
			this.getlossReasons()
		},
		onReachBottom(){
			// 上划加载
			if(this.list.length==this.total){
				this.formData.pageNum=1
				return false
			}
			this.formData.pageNum++
			listCustomer(this.formData).then(response=>{
				this.list.push(...response.rows)
			})
			
		},
		onPullDownRefresh(){
			// 下拉加载
			this.formData={
					pageSize:10,
					pageNum:1,
				},
			this.list=[]
			setTimeout(()=>{
				this.initData()
				uni.stopPullDownRefresh()
			},1000)
		},
		methods:{
			async initData(){
				let res=await listCustomer(this.formData)
				console.log(res);
				this.list=res.rows
				this.total=res.total
			},
			// 左侧返回按钮
			backFn(){
				uni.switchTab({
					url:"/pages/index"
				})
			},
			// 右侧新增按钮
			addFn(){
				uni.navigateTo({
					url:"/pages/customer/addcustomer/addcustomer"
				}) 
				 // console.log('22');
			},
			// 点击事件
			async delItem(index){
				this.show=index
				
			},
			// 确认删除
			async btnOk(val,idx){
				const res=await delCustomer(val.id)
				if(res.code==200){
					this.show=null
					this.$refs.uToast.show({
						type:'success',
						message:'删除成功',
					})
				}
				this.formData={
					pageSize:10,
					pageNum:1,
				}
				this.initData()
			},
			getInfo(val){
				// console.log('111');
				uni.navigateTo({
					url:'/pages/customer/customerInfo/customerInfo?id='+val
				}) 
				 
			},
			// 获取标签 biz_label
			getLabel(){
				getDicts('biz_label').then(response=>{
					console.log(response);
					this.labelOptions.push(response.data)
				})
			},
			labelConfirm(e){
				this.formData.labelName=e.value[0].dictLabel
				this.formData.label=e.value[0].dictValue
				this.labelShow=false
			},
			// 获取客户来源biz_source
			getSource(){
				getDicts('biz_source').then(res=>{
					this.sourceOption.push(res.data)
				})
			},
			sourrceConfirm(e){
				this.formData.sourceName=e.value[0].dictLabel
				this.formData.source=e.value[0].dictValue
				this.sourceShow=false
			},
			// 获取流失原因
			getlossReasons(){
				getDicts('biz_loss_reasons').then(res=>{
					this.lossReasonsOptions.push(res.data)
				})
			},
			lossReasonsConfirm(e){
				this.formData.lossReasonsName=e.value[0].dictLabel
				this.formData.lossReasons=e.value[0].dictValue
		        thuis.lossReasonsShow=false
			},
			reset(){
				this.formData={
					pageSize:10,
					pageNum:1,
					name:'',
					chargePersonName:'',//负责人
					source:'',//客户来源
					sourceName:'',
					label:'',
					labelName:'',
					lossReasons:'',
					lossReasonsName:'',
				}
				this.isShow=false
			},
			searchClick(){
				this.initData()
				this.isShow=false
				this.formData={
					pageSize:10,
					pageNum:1,
					name:'',
					chargePersonName:'',//负责人
					source:'',//客户来源
					sourceName:'',
					label:'',
					labelName:'',
					lossReasons:'',
					lossReasonsName:'',
				}
			},
			// 搜索条件
			changeFn(){
				this.list=[]
				this.initData()
			},
			// 放大镜 搜索
			// magnifierBtn(){}
			selectBtn(e){
				console.log(e);
			 console.log(this.labelOptions);
				if(e==1){
					this.labelShow=true
				}
			},
		}
		
		
	}
</script>

<style lang="scss" scoped>
	// 下拉选择框
	.demo-uni-row {
		margin-bottom: 10px;
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 16px;
			}
	}
	// 筛选框
	// 右边弹框
	.rightBox{
		position: relative;
		min-width:230px;
		height:100%;
		.input{
			padding: 10px 20px;
			border-bottom: solid 1px #eee;
		}
		.button{
			width: 100%;
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			.anniu{
				display: inline-block;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
		}
	}
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
 .customerbox{
	 position: relative;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px;
	.customerbox_one{
		font-size: 15px;
	}
/deep/ .status_box{
	     .status_box_one{
			 display: block;
			 width: 75px;
			 height: 22px;
			 background-color: #f8e0bc;
			 text-align: center;
			 line-height: 22px;
			 color: #ff7c0a;
			 font-size: 12px;
			 margin-top: 5px;
		 }	
		}
	// 	/deep/ .customerInfo{
	// 		width: 70px;
	// 		height: 25px;
	// 		line-height: 25px;
	// 		font-size: 12px;
	// 		text-align: center;
	// 		color: #ff7c0a;
	// 		background-color: #fff;
	// 		position: absolute;
	// 		top: 20px;
	// 		right: 10px;
			 
	//       }
	
     }
</style>
